<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>登录</title>
  <!-- <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4179360_0trgibeq4zp.css"> -->
  <link rel="stylesheet" href="./public/css/index.css">
  <!-- <script src="../node_modules/md5/md5.js"></script> -->
  <style>
    /* <!-- 、登录文字折叠效果 --> */

    .container {
      /* margin-top: 50px; */
      text-align: center;
      /* background: #000; */
      filter: contrast(30);
    }

    .text {
      font-size: 100px;
      color: #fff;
      animation: showup 3s forwards;
    }

    @keyframes showup {
      from {
        letter-spacing: -22px;
        filter: blur(10px);
      }

      to {
        letter-spacing: 10px;
        filter: blur(1px);

      }

    }
  </style>

</head>

<body>
  <section>
    <!-- 定位在底部的大背景 -->
    <img src="./public/img/蓝色粒子.jpg" class="bg">

    <!-- 登录表单容器 -->
    <div class="login">
      <!-- 、登录文字折叠效果 -->
      <div class="container">
        <h2 class="text">Sign In</h2>

      </div>

      <div>
        <div class="inputBox" v-model="username">
          <input type="text" placeholder="请输入账号" id="username">
        </div>
        <div class="inputBox" id="pass" v-model="password">
          <input type="password" id="password" placeholder="请输入密码">
          <i class="iconfont icon-see"></i>
          <i class="iconfont icon-nosee"></i>
        </div>
        <div class="inputBox">
          <input type="submit" value="登录" id="btn">
        </div>
        <div class="group">
          <a href="./public/wj_pwd.html">忘记密码</a>
          <a href="./public/login_zh.html">注册</a>
        </div>

        <!-- <p><button type="submit">Login</button> -->
      </div>


    </div>

    <!-- 飘落的花朵 -->
    <div class="flower">
      <img class="img_l" src="./public/img/树叶12.png">
      <img class="img_l" src="./public/img/树叶12.png">
      <img class="img_l" src="./public/img/树叶12.png">
      <img class="img_l" src="./public/img/树叶12.png">
      <img class="img_l" src="./public/img/树叶12.png">
      <img class="img_l" src="./public/img/树叶12.png">
      <img class="img_l" src="./public/img/树叶12.png">
      <img class="img_l" src="./public/img/树叶12.png">
    </div>
  </section>
</body>
<!-- <script src="./public/js/index.js"></script> -->

<script>
  btn.onclick = () => {
    let user_name = username.value
    let pass_word = password.value

    if (user_name == '' || pass_word == '') {
      alert("账号密码不能为空")
      return ''
    }

    let xhr = new XMLHttpRequest()
    let url = `login?user_name=${user_name}&pass_word=${pass_word}`
    xhr.open('GET', url)
    xhr.onload = function () {
      let result = xhr.responseText;
      result = JSON.parse(result)
      // console.log(result)
      //  头像码
      let random = 0
      //  账号名
      let user = 0
      if (result.code == 200) {
        random = result.data[0].random
        user = result.data[0].user
        // 创建一个 存放 随机头像码 用户名 的对象
        let mydx = {
          "random": random,
          "username": user
        }
        // 将mydx对象 转换成字符串
        let str_mydx = JSON.stringify(mydx)
        /* 将字符串信息存进 浏览器会话存储空间中*/
        sessionStorage.setItem("mykey_ran_user", str_mydx);
        // 获取浏览器 会话存储空间中 信息
        let str_key = sessionStorage.getItem('mykey_ran_user')
        // 服务器返还的  登陆成功的账号
        localStorage.setItem('username', user);
        // 登录状态 
        localStorage.setItem('login_is', 1)

        // 将 字符串转换成 对象 可调用
        // str_key = JSON.parse(str_key)
        // console.log('str_key2', str_key)
        location.replace("./public/page.html")
        alert("登录成功");
      } else if (result.code == 500) {
        alert("账号密码错误");
      } else {
        // console.log('登录失败')
        alert("账号密码错误");

      }

    }
    xhr.send()
  }

</script>

</html>